<template>
    <div class="page">
        <el-row class="part1_box">
            <el-row style="margin-bottom:20px;">
                <el-col :span='4' :offset="1">
                    <div class="part1_list">
                        <p>经理</p>
                        <p>0</p>
                    </div>
                </el-col>
                
                <el-col :span='4' :offset="1">
                    <div class="part1_list">
                        <p>经销商</p>
                        <p>0</p>
                    </div>
                </el-col>
                <el-col :span='3' :offset="1">
                    <div class="part1_list">
                        <p>开卡(户)</p>
                        <p>0</p>
                    </div>
                </el-col>
                <el-col :span='3' :offset="1">
                    <div class="part1_list">
                        <p>缴费(户)</p>
                        <p>0</p>
                    </div>
                </el-col>
            </el-row>
        </el-row>
        <el-row class="part1_box">
            <el-row style="margin:20px;">
                <el-col :span="24" :xs="24">
                    <el-form :model="queryParams"  ref="queryForm" :inline="true"  label-width="68px">
                        <my-form :form='queryParams' style="float:left;" :options="queryParamsForm"></my-form>
                    </el-form>
                </el-col>
            </el-row>
        </el-row>
        <el-row class="part1_box">
            <el-row style="margin:20px;">
                <Table :list='list' :loading='loading' :tableColumns='tableColumns' :tableOption='tableOption' @clickButton='clickButton' ></Table>
                <pagination  v-show="total>0" :total="total"  :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"  @pagination="getList" />
            </el-row>
        </el-row>
        <!-- 详细内容 -->
        <el-dialog title="详细内容" :visible.sync="openView" width="1100px" append-to-body>
            <el-form ref="form" label-width="120px" size="mini">
                <el-row>
                    <el-col :span="24"><h3>基本信息</h3></el-col>
                </el-row>
                <el-row>
                    <el-col :span="6"><el-form-item label="手机号：">13812345678</el-form-item></el-col>
                    <el-col :span="6"><el-form-item label="等级：">经销商</el-form-item></el-col>
                    <el-col :span="6"><el-form-item label="推荐人：">张三</el-form-item></el-col>
                    <el-col :span="6"><el-form-item label="真实姓名：">张小三</el-form-item></el-col>
                </el-row>
                <el-row>
                    <el-col :span="6"><el-form-item label="开卡状态：">正常</el-form-item></el-col>
                    <el-col :span="6"><el-form-item label="开卡卡号：">123456</el-form-item></el-col>
                    <el-col :span="6"><el-form-item label="归属状态：">已归属、未归属</el-form-item></el-col>
                    <el-col :span="6"><el-form-item label="归属人：">13812345678</el-form-item></el-col>
                </el-row>
                <el-row>
                    <el-col :span="6"><el-form-item label="分红状态：">正常、冻结</el-form-item></el-col>
                    <el-col :span="6"><el-form-item label="当前可提：">10</el-form-item></el-col>
                     <el-col :span="6"><el-form-item label="累计分红：">100</el-form-item></el-col>
                    <el-col :span="6"><el-form-item label="累计提现：">20</el-form-item></el-col>
                </el-row>
                <el-row>
                   <el-col :span="24"><h3>钱包明细</h3></el-col>
                </el-row>
                <el-row>
                    <Table :list='list2'  :tableColumns='tableColumns2'  ></Table>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import Table from '@/views/components/myTable'
import myForm from '@/views/components/myForm'
export default {
    components:{
        Table,
        myForm
    },
    data() {
        return {
            loading:true,
            openView:false,
            queryParamsForm:[
                {title:'手机号',key:'id',type:'text',styleWidth:'240px'},
                {title:'真实姓名',key:'s',type:'text',styleWidth:'240px'},
                {title:'等级筛选',key:'state',type:'select',styleWidth:'240px',
                    option:{
                        data:[
                            {id:'1',label:'经理', value:'pending'},
                            // {id:'2',label:'经销商', value:'unused'},
                            {id:'3',label:'经销商', value:'used'},
                                                        
                        ],
                        props:{  key:'id', label:'label', value:'value' },
                    },
                },
            ],
            queryParams:{
                pageNo: 1,
                pageSize: 10,
            },
            tableColumns:[
                {label:'UID',param:'uid'},
                {label:'手机号',param:'b'},
                {label:'等级',param:'a'},
                {label:'真实姓名',param:'a'},
                {label:'邀请码',param:'a'},
                {label:'推荐人',param:'a'},
                {label:'归属人',param:'a'},
                {label:'当前可提',param:'a'},
                {label:'累计分红',param:'a'},
                {label:'开卡状态',param:'a'},
                {label:'分红状态',param:'a'},
                {label:'注册时间',param:'a'},
            ],
            tableOption:{
                label:'操作',
                options:[
                    {
                        label:'冻结',
                        text:'text',
                        icon:'el-icon-lock',
                        methods:'handleFrozen'
                    },
                    {
                        label:'修改',
                        text:'text',
                        icon:'el-icon-edit',
                        methods:'handleUpdate'
                    },
                    {
                        label:'查看明细',
                        text:'text',
                        icon:'el-icon-view',
                        methods:'handleView'
                    },
                ]
            },
            tableColumns2:[
                {label:'ID',param:'id'},
                {label:'类型',param:'type'},
                {label:'金额',param:'a'},
                {label:'状态',param:'a'},
                {label:'结算时间',param:'a'},
            ],
            list:[
                {uid:'10001'}
            ],
            list2:[
                {id:'10001',type:'分享奖励'},
                {id:'10002',type:'团队奖励'},
                {id:'10003',type:'F1分红'},
                {id:'10004',type:'F2分红'},
                {id:'10005',type:'排位分红'},
            ],
            total:0,
            queryParams:{
                pageNo: 1,
                pageSize: 10,
            },
        }
    },
    created(){
        this.getList()
    },
    methods:{
        clickButton(val){
            this[val.methods](val.row)
        },
        //列表
        getList(){
            this.loading = false;
        },
        //冻结
        handleFrozen(row){
            this.$confirm('是否确认冻结ID为"' + row.uid + '"的数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function() {
                console.log('确定')
                //return delJob(jobIds);
            }).then(() => {
                this.getList();
                this.msgSuccess("冻结成功");
                this.tableOption.options.shift({
                    label:'冻结',
                    text:'text',
                    icon:'el-icon-lock',
                    methods:'handleFrozen'
                })
                this.tableOption.options.unshift({
                    label:'解冻',
                    text:'text',
                    icon:'el-icon-key',
                    methods:'handleThaw'
                })
            }).catch(() => {});
        },
        //解冻
        handleThaw(row){
            
            this.$confirm('是否确认解冻ID为"' + row.uid + '"的数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function() {
                
                //return delJob(jobIds);
            }).then(() => {
                this.getList();
                this.msgSuccess("解冻成功");
                this.tableOption.options.shift({
                    label:'解冻',
                    text:'text',
                    icon:'el-icon-key',
                    methods:'handleThaw'
                })
                this.tableOption.options.unshift({
                    label:'冻结',
                    text:'text',
                    icon:'el-icon-lock',
                    methods:'handleFrozen'
                })
                
            }).catch(() => {});
        },
        //修改
        handleUpdate(row){
            
        },
        //查看明细
        handleView(row){
            this.openView = true
        },
    }
}
</script>
<style scoped>
.page {width:100%; height:auto; min-height:90vh; background: #eee; padding:20px;}
.part1_box {background:#fff; width:100%; margin-bottom:20px; border-radius: 20px;}
.part_title {font-size:30px; font-weight: bold; margin-top:20px; margin-left:20px; display: block; float:left;}
.part_dateDay { margin-top:30px; margin-left:20px;  display: block; float:left;}
.part1_list {height:146px; width:80%; 
background: linear-gradient(30deg, #2285FF 0%, #3BAEFF 100%); border-radius: 20px; margin-top:40px; color:#fff;}
.part1_list p {margin:0; padding:0; padding-top:20px; padding-left:40px;}
.part1_list p:nth-child(1) { font-size:24px;}
.part1_list p:nth-child(2) {font-size:50px;}
</style>
